<!DOCTYPE>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>添加部门</title>
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css"  media="all">
    <link rel="stylesheet" type="text/css" href="../static/plugin/layer/skin/layer.css">
    <link rel="stylesheet" type="text/css" href="../static/css/dj-css.css">
    <style>
        .layui-form{margin:0 20px;}
        .x-red{color:red;}
        .layui-form-item{line-height: 38px;}
    </style>
</head>
<body>
<div id="createApp">
        <fieldset class="layui-elem-field layui-field-title" >
            <legend>部门</legend>
        </fieldset>
        <form class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">部门名称</label>
                <div class="layui-input-inline" >
                    <input type="text" name="deptName" v-model="parameter.deptName" placeholder="请输入部门名称" autocomplete="off" class="layui-input" @blur="verify(parameter.deptName)">
                </div>
                <span class="x-red">*必填</span>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门描述</label>
                <div class="layui-input-inline">
                    <input type="text" name="deptDescription" v-model="parameter.deptDescription" lay-verify="required" placeholder="请输入部门描述" autocomplete="off" class="layui-input" @blur="verify(parameter.deptDescription)">
                </div>
                <span class="x-red">*必填</span>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="orgCode" v-model="parameter.orgCode" lay-verify="required" placeholder="请输入部门编号" autocomplete="off" class="layui-input" @blur="verify(parameter.orgCode)">
                </div>
                <span class="x-red">*必填</span>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门类型</label>
                <div class="layui-input-inline">
                    <input type="text" name="orgType" v-model="parameter.orgType" lay-verify="required" placeholder="请输入部门类型" autocomplete="off" class="layui-input" @blur="verify(parameter.orgCode)">
                </div>
                <span class="x-red">*必填</span>
            </div>

            <div class="layui-form-item">
                <div class="dj-select dj-select-inline boxStyle">
                    <label style="height:40px;line-height: 40px;">所属部门</label>
                    <div class="dj-select-content" >
                        <div class="dj-select-input" flag = 'true' >
                            <span class="dj-selected readOnly" type="text" name=""  selectedCode='' style="height:40px;line-height:40px;" id="parentDeptId">请选择所属部门</span>
                            <i></i>
                        </div>
                        <ul class="dj-select-list">
                            <li v-for="item in deptList" :class="{'selected':(parameter.parentDeptId == item.id) ? true : false }"  :code="item.id">{{item.deptName}}</li>
                        </ul>
                    </div>
                </div>
                <span class="x-red"> *必填</span>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="mobile" v-model="parameter.mobile" lay-verify="required" placeholder="请输入电话" autocomplete="off" class="layui-input" @blur="verify(parameter.mobile)">
                </div>
                <span class="x-red">*必填</span>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">传真</label>
                <div class="layui-input-inline">
                    <input type="text" name="fax" v-model="parameter.fax" lay-verify="required" placeholder="请输入传真" autocomplete="off" class="layui-input" @blur="verify(parameter.fax)">
                </div>
                <span class="x-red">*必填</span>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-inline">
                    <input type="text" name="address" v-model="parameter.address" lay-verify="required" placeholder="请输入地址" autocomplete="off" class="layui-input" @blur="verify(parameter.address)">
                </div>
                <span class="x-red">*必填</span>
            </div>
        </form>
    <div class="layui-form-item">
        <label class="layui-form-label"></label><button class="layui-btn" lay-submit="" lay-filter="demo2" @click="sub">提交</button>
    </div>
</div>
<script src="../static/lib/jquery.min.js"></script>
<script src="../static/lib/layui/layui.js" charset="utf-8"></script>
<script src="../static/lib/vue.min.js"></script>
<script src="../static/lib/x-layui.js"></script>
<script src="../static/lib/dj-js.js"></script>
<script type="text/javascript">
    var myid="${department.id}"
    if(myid==""){
        var kid=""
    }else {
        kid="$!{department.id}"
    }
    var VM = new Vue({
        el:"#createApp",
        created:function(){
            this.lay();
            this.getDeptList();
        },
        data:{
            deptList:[],
            parameter:{
                deptName:'$!{department.deptName}',
                deptDescription:'$!{department.deptDescription}',
                orgCode:'$!{department.orgCode}',
                orgType:'$!{department.orgType}',
                mobile:'$!{department.mobile}',
                fax:'$!{department.fax}',
                address:'$!{department.address}',
                createTime:'$!{department.createTime}',
                updateTime:'$!{department.updateTime}',
                parentDeptId:'$!{department.parentDeptId}',/*$!{department.parentDeptId}*/
                id:kid
            }
        },
        methods:{
            lay:function () {
                layui.use(['layer',"form",'laydate'], function(){
                    var form = layui.form(),
                            layer = layui.layer,
                            laydate = layui.laydate;
                    form.on('checkbox(allChoose)', function(data){
                        var child = $(data.elem).parents('table').find('tbody input.checkbox');
                        child.each(function(index, item){
                            item.checked = data.elem.checked;
                        });
                        form.render('checkbox');
                    });

                });
            },
            verify:function (item) {
                if(item == ""){
                    layer.msg("必填项不能为空！", {icon: 5});
                    return false;
                }
            },
            sub:function () {
                var _this = this;
                _this.parameter.parentDeptId = $("#parentDeptId").attr("selectedCode");
//                console.log($("#parentDeptId").val());
                console.log(_this.parameter.parentDeptId);
                //判断要提交的内容是否为空
                if(this.parameter.deptName == "" ){
                    layer.msg("请输入部门名称！", {icon: 5});
                    return false;
                }else if(this.parameter.deptDescription == ""){
                    layer.msg("请输入部门描述！", {icon: 5});
                    return false;
                }
                else if(this.parameter.orgCode == ""){
                    layer.msg("请输入部门编号！", {icon: 5});
                    return false;
                }
                else if(this.parameter.orgType == ""){
                    layer.msg("请输入部门类型！", {icon: 5});
                    return false;
                }else if(_this.parameter.parentDeptId == ""){
                    layer.msg("请选择所属部门！", {icon: 5});
                    return false;
                }else if(this.parameter.mobile == ""){
                    layer.msg("请输入手机号！", {icon: 5});
                    return false;
                }else if(this.parameter.fax == ""){
                    layer.msg("请输入传真！", {icon: 5});
                    return false;
                }
                else if(this.parameter.address == ""){
                    layer.msg("请输入地址！",{icon:5});
                    return false;
                }
//                return false;
                $.ajax({
                    type: "post",
                    url: "../department/saveOrUpdate.do",
                    data: _this.parameter,
                    dataType: "json",
                    success: function(data){
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                        parent.window.location.reload();
                        window.location.href = "javascript:location.replace(location.href)";
                    }
                });
            },
            getDeptList:function(){
                var _this=this;
                $.ajax({
                    type: "post",
                    url: "../department/getLevel1DeptList.do",
                    dataType: "json",
                    success: function(data){
                        _this.deptList=data.result.deptList;
                        console.log(_this.parameter.parentDeptId);
                        _this.deptList.forEach(function (item,value) {
                            console.log(item.id);
                            if(_this.parameter.parentDeptId == item.id){
                                $("#parentDeptId").html(item.deptName);
                                $("#parentDeptId").attr("selectedCode",item.id);
                            }
                        });
                    }
                });
            }
        }
    });//vue 实例结束

</script>
</body>
</html>